<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>售后订单管理</title>
    <link rel="stylesheet" href="/order/views/after_sale/index.css">
</head>
<body>
    <div class="container">
        <!-- 头部导航 -->
        <lap-order-header></lap-order-header>
        
        <!-- 主体内容 -->
        <main class="main-content">
            <!-- 搜索和操作区域 -->
            <div class="content-header">
                <div class="search-form">
                    <input type="text" placeholder="售后单号/订单号" id="keyword">
                    <input type="text" placeholder="状态" id="status">
                    <input type="date" id="startTime" placeholder="开始日期">
                    <input type="date" id="endTime" placeholder="结束日期">
                    <button class="btn btn-primary" id="searchBtn">搜索</button>
                </div>
                <div>
                    <button class="btn btn-success" id="importBtn">导入Excel</button>
                    <button class="btn btn-primary" id="exportBtn">导出Excel</button>
                </div>
            </div>
            
            <!-- 表格区域 -->
            <div class="table-container">
                <div class="table-scroll">
                    <table class="table">
                        <thead>
                            <tr>
                                <th class="w-50">序号</th>
                                <th class="w-100">店铺名称</th>
                                <th class="w-120">订单号</th>
                                <th class="w-120">售后单号</th>
                                <th class="w-120">退货物流单号</th>
                                <th class="w-100">商品编码</th>
                                <th class="w-100">状态</th>
                                <th class="w-150">导入时间</th>
                                <th class="w-150">更新时间</th>
                            </tr>
                        </thead>
                        <tbody id="orderList">
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 分页区域 -->
            <div id="paginationContainer"></div>
        </main>
    </div>
    
    <!-- 导入表单弹窗 -->
    <div class="mask" id="mask"></div>
    <div class="modal" id="importForm">
        <h3>导入Excel</h3>
        <form id="uploadForm">
            <input type="file" name="file" accept=".xlsx,.xls">
            <div style="margin-top: 15px;">
                <button type="submit" class="btn btn-primary">确定</button>
                <button type="button" class="btn" id="cancelImportBtn">取消</button>
            </div>
        </form>
    </div>

    <!-- 导出配置弹窗 -->
    <div class="modal" id="exportForm">
        <h3>导出配置</h3>
        <div>
            <button type="button" class="btn" id="selectAllBtn">全选</button>
            <button type="button" class="btn" id="unselectAllBtn">取消全选</button>
            <button type="button" class="btn" id="defaultColumnsBtn">默认选项</button>
        </div>
        <div class="column-list" id="columnList">
            <!-- 列选项将通过 JavaScript 动态生成 -->
        </div>
        <div class="form-footer">
            <div>
                <label>
                    <input type="checkbox" id="saveAsDefault"> 保存为默认选项
                </label>
            </div>
            <div>
                <button class="btn btn-primary" id="confirmExportBtn">确定</button>
                <button class="btn" id="cancelExportBtn">取消</button>
            </div>
        </div>
    </div>

    <!-- 添加加载提示 -->
    <div class="loading-mask" id="loadingMask">
        <div class="loading-content">
            <div class="loading-spinner"></div>
            <div class="loading-text" id="loadingText">处理中...</div>
        </div>
    </div>

    <script type="module" src="/order/views/after_sale/index.js"></script>
</body>
</html> 